<template>
    <div style="width: 400px;">
        <el-input v-model.number="item.num" :min="1" placeholder="数量" style="width: 320px;" class="select-item-input" v-for="(item, index) in form" :key="index">
            <select-item v-model="item.id" :type="type" :clearable="false" style="width: 160px;" slot="prepend"></select-item>
            <el-button slot="append" type="danger" icon="el-icon-delete" @click="delItem(index)"></el-button>
        </el-input>
<!--        <el-empty v-if="!form.length" :image-size="50" description="请添加道具">-->
        <el-button icon="el-icon-plus" type="primary" @click="addItem" v-if="!form.length">添加道具</el-button>
<!--        </el-empty>-->
        <el-button v-else icon="el-icon-plus" type="primary" @click="addItem"/>
    </div>

</template>

<script>
import {isObject, isEqual } from "lodash";
export default {
    name: 'multi-single',
    props: {
        value: {
            type: Array,
            default: [],
        },
        type: {
            type: Array,
            default: null,
        },
        maxLength: {
            type: Number,
            default: 0,
        }
    },
    data() {
        return {
            loading: false,
            itemOptions: this.$store.state.item.options,
            rmbIds: [1006, 1015, 1016, 1017],
            form: [],
        }
    },
    computed: {
        getItemById() {
            return this.$store.getters["item/getItemById"];
        },
        items() {
            return this.$store.state.item.all;
        },
        itemsObj() {
            let obj = {};
            this.items.map(v => {
                v.type_name = this.itemOptions.type[v.type];
                obj[v.id] = v;
            })
            return obj;
        },
    },
    watch: {
        form: {
            handler(val, old) {
                this.$emit('input', val.map(v => {
                    return this.getItemById(v.id, v.num);
                }));
            },
            deep: true,
        },
        value: {
            handler(val, old) {
                // console.log(val, old)
                if (isEqual(val, old)) return ;
                this.syncForm();
            }
        }
    },
    methods: {
        getItems() {
            if (this.items.length < 1) this.$store.dispatch('item/All', 'item');
        },
        syncForm() {
            // console.log('value', this.value)
            if (!this.value || !this.value.length) return ;
            let form = Array.from(this.value);
            this.form = form.map(v => {
                if (this.rmbIds.includes(v.id)) v.num /= 100;
                return v;
            });
            // console.log('this.form', this.form);
        },
        addItem() {
            if (this.maxLength && this.form.length >= this.maxLength) {
                this.$message.warning(`最多添加 ${this.maxLength} 个道具`);
                return false;
            }
            this.form.push(this.getItemById(1003, 0));
        },
        delItem(index) {
            this.form.splice(index, 1);
        },
    },
    created() {
        this.getItems();
        this.syncForm();
    }
}
</script>

<style lang="scss" scoped>
.item-row {
    margin: 0 0 10px 0;
}
.select-item-input ::v-deep  .el-input-group__prepend {
    background-color: #fff !important;
    color: black;
}
</style>

